import React, { Component } from 'react'
import styles from './Category.module.scss'
import axios from 'axios'
import my1 from '../../assets/images/chatImg05.png'
import { jsonToJson } from '../../util/jsonToJson'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile'
export default class Category extends Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()
        this.myRef2 = React.createRef()
        this.state = {
            leftList: [],
            rTopList:[],
            rBottomList:[],
            xlList:[],
            xpList:[],
            isActive: 0,
            isShow:'none',
            tabs: [
                { title: <Badge>综合</Badge> },
                { title: <Badge>销量</Badge> },
                { title: <Badge>精品</Badge> },
            ],
        }
    }
    componentDidMount() {
      
        axios.get('./json/classify.json').then(res=>{
           this.setState({
               leftList:res.data.z.SumList,
               rTopList:res.data.z.SumList[0].TopList,
               rBottomList:res.data.z.SumList[0].synthesizeList,
               xlList:res.data.z.SumList[0].xlList,
               xpList:res.data.z.SumList[0].xpList
           })
        }).catch(err=>{console.log(err)})

        this.myRef.current.addEventListener("scroll", this.rightScroll)
        
    }
    rightScroll = (params) => {
        let p = this.myRef.current
        let p2 =  this.myRef2.current
        if (p2.offsetTop - p.scrollTop - 48 <= 0) {
            this.setState({
                isShow:"block"
            })
        } else {
            this.setState({
                isShow:"none"
            })
        }
    }
    componentWillUnmount(){
        this.myRef.current.removeEventListener("scroll", this.rightScroll)
    }
    //点击左边列表样式改变
    handleClick = (e) => {
        // console.log(e.target.getAttribute('data-index'))
        let num = parseInt(e.target.getAttribute('data-index'))
        this.setState({
            isActive: parseInt(num),
            rTopList:this.state.leftList[num].TopList,
            rBottomList:this.state.leftList[num].synthesizeList,
            xlList:this.state.leftList[num].xlList,
            xpList:this.state.leftList[num].xpList
        })
    }
    //跳转搜索页面
    goToInpContent = (params) => {
        this.props.history.push('/search')
    }
    //跳转客服聊天页面
    goToChat = (params) => {
        this.props.history.push('/chat')
    }
    //跳转购物车页面
    goToCart = (params) => {
        this.props.history.push('/cart')
    }



    render() {
        let { leftList, isActive, rTopList, rBottomList , xpList , xlList } = this.state
        return (

            <div className={styles.mgClassify}>
                <div className={styles.mgClassifyHeader}>
                    <div className={styles.ClassifyHeaderLeft}>
                        <i onClick={this.goToChat} className='iconfont icon-icon-'></i>
                    </div>
                    <div onClick={this.goToInpContent} className={styles.ClassifyHeaderCid}>
                        <i className='iconfont icon-fangdajing'></i>
                        <span>斜挎包新款</span>
                    </div>
                    <div className={styles.ClassifyHeaderRight}>
                        <i onClick={this.goToCart} className='iconfont icon-shangcheng2'></i>
                    </div>
                </div>
                <div className={styles.mgClassifyMain}>
                    <div
                        onClick={this.handleClick}
                        className={styles.ClassifyMainLeftList}>
                        {
                            leftList && leftList.map((v, i) => {
                                return (
                                    <div
                                        data-index={i}
                                        key={v.name}
                                        className={`${styles.MainLeftListItem} ${isActive === i ? styles.activePar : ""}`}
                                    >
                                        <p
                                        data-index={i}
                                        className={`${isActive===i?styles.active:""}`}
                                        >{v.name}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div ref={this.myRef} className={styles.ClassifyMainRight}>
                        <div style={{display:this.state.isShow}} className={styles.showBox}>
                        <Tabs tabs={this.state.tabs}
                                initialPage={0}
                                tabBarActiveTextColor="#f2627a"
                                tabBarInactiveTextColor="#818181"
                                tabBarUnderlineStyle={{ display: "none" }}
                            >
                            </Tabs>
                        </div>
                        <div className={styles.MainRightTop}>
                            {
                                rTopList && rTopList.map((v, i) => {
                                    return (
                                        <div key={v.tid} className={styles.MainRightTopItem}>
                                            <img src={v.imgUrl} alt="" />
                                            <span>{v.text}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div ref={this.myRef2} className={styles.MainRightTabs}>
                            <Tabs tabs={this.state.tabs}
                                initialPage={0}
                                tabBarActiveTextColor="#f2627a"
                                tabBarInactiveTextColor="#818181"
                                tabBarUnderlineStyle={{ display: "none" }}
                            >
                                <div className={styles.synthesize}>
                                    <div className={styles.MainRightBottom}>
                                        {
                                            rBottomList && rBottomList.map((v, i) => {
                                                return (
                                                    <div key={v.sid} className={styles.ightBottomItem}>
                                                        <img src={v.imgUrl} alt="" />
                                                        <span className={styles.Num}>已售{v.soldNum}件</span>
                                                        <p>{v.title}</p>
                                                        <div className={styles.BottomItemBottom}>
                                                            <div className={styles.ItemBottomLeft}>￥{v.price}</div>
                                                            <div className={styles.ItemBottomRight}>
                                                                <span>{v.collect}</span>
                                                                <i className='iconfont icon-xingxing'></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                <div className={styles.synthesize}>
                                  <div className={styles.MainRightBottom}>
                                        {
                                            xlList && xlList.map((v, i) => {
                                                return (
                                                    <div key={v.sid} className={styles.ightBottomItem}>
                                                        <img src={v.imgUrl} alt="" />
                                                        <span className={styles.Num}>已售{v.soldNum}件</span>
                                                        <p>{v.title}</p>
                                                        <div className={styles.BottomItemBottom}>
                                                            <div className={styles.ItemBottomLeft}>￥{v.price}</div>
                                                            <div className={styles.ItemBottomRight}>
                                                                <span>{v.collect}</span>
                                                                <i className='iconfont icon-xingxing'></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                 <div className={styles.synthesize}>
                                <div className={styles.MainRightBottom}>
                                        {
                                            xpList && xpList.map((v, i) => {
                                                return (
                                                    <div key={v.sid} className={styles.ightBottomItem}>
                                                        <img src={v.imgUrl} alt="" />
                                                        <span className={styles.Num}>已售{v.soldNum}件</span>
                                                        <p>{v.title}</p>
                                                        <div className={styles.BottomItemBottom}>
                                                            <div className={styles.ItemBottomLeft}>￥{v.price}</div>
                                                            <div className={styles.ItemBottomRight}>
                                                                <span>{v.collect}</span>
                                                                <i className='iconfont icon-xingxing'></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </Tabs>

                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
